<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #time{
            font-size: 40px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="time"></div>

    <script>
        window.addEventListener('load',function(){
            //定义变量
            let time = document.getElementById('time');

            let currDate,currTime,nextTime,allTime,allSecond,d,h,m,s;
            //定义将来时间
            let nextDate = new Date('2021/09-14 00:00:00');


            //开启定时器
            setInterval(()=>{
                //获取当前时间
                currDate = new Date();

                //现在时间距离1970/07/01剩余总毫秒数
                currTime = currDate.getTime();
                //将来时间距离1970/07/01剩余总毫秒数
                nextTime = nextDate.getTime();
                //将来时间距离现在时间的总毫秒数
                allTime = nextTime - currTime;
                
                /*
                毫秒转换成天时分秒的公式
                1、总秒数/3600/24——天
                2、总秒数/3600%24——时
                3、总秒数/60%60——分
                4、总秒数%60——秒
                */
               //求出总秒数
               allSecond = Math.floor(allTime/1000);
                //console.log(allSecond);

               d = format(Math.floor(allSecond/3600/24));
               h = format(Math.floor(allSecond/3600%24));
               m = format(Math.floor(allSecond/60%60));
               s = format(Math.floor(allSecond%60));
               
                // 写入
                time.innerText = `距离放假还剩下：${d}天${h}时${m}分${s}秒`
            },1000)
            function format(num){
                return num < 10 ? '0'+num : num ;
            }

        });

    </script>
</body>
</html>